<template>
  <div
    v-show="border"
    class="drag"
    :style="{ width: `${dragMinWidth}px`, height: `${dragMinHeight}px`, top: `${top}px`,left: `${left}px`,right: `${right}px` }"
  >
    <div class="title text-white" v-on="{mousedown}">
      <div class="col">
        <span class="text-left" v-text="title"></span>
      </div>
      <div class="col text-right">
        <i
          class="min minbuton iconfont"
          :class="guding?'icon-hte-guding':'icon-hte-xuanzhuan45'"
          @click="guding = !guding"
          title="固定"
        ></i>
        <i class="min minbuton iconfont icon-zuixiaohua" @click="isShow(1)" title="最小化"></i>
        <i
          class="max minbuton iconfont"
          :class="max?'icon-huanyuan':'icon-zuidahua'"
          v-on="{ click: maxclick }"
          :title="max?'还原':'最大化'"
        ></i>
        <i class="max minbuton el-icon-close" @click="isShow(0)"></i>
      </div>
    </div>
    <div class="resizeL"></div>
    <div class="resizeT"></div>
    <div class="resizeR"></div>
    <div class="resizeB"></div>
    <div class="resizeLT"></div>
    <div class="resizeRT"></div>
    <div class="resizeRB"></div>
    <div class="resizeLB"></div>
    <slot></slot>
    <div class="wenti text-right border" v-if="getvideodialogVisible">

      <button class="btn btn-primary padd" @click="tiaoguo.sections.tiaoguo">重新观看</button>
      <button class="btn btn-primary padd" @click="tiaoguo.sections.submit">提交答案</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "xiaofeidrag",
  data() {
    return {
      max: false,
      top: 35,
      right: 35,
      width: 787,
      height: 442,
      left: "auto",
      guding: false,
      oldtop: 35,
      oldright: 35,
      oldwidth: 787,
      oldheight: 472,
      oldleft: "auto"
    };
  },
  props: {
    scratchheightset: {
      type: Function
    },
    scratchwidthset: {
      type: Function
    },
    ifloddingset: {
      type: Function
    },
    isShow: {
      type: Function
    },
    title: {
      type: String,
      default: ""
    },
    dragMinWidth: {
      type: Number,
      default: 300
    },
    dragMinHeight: {
      type: Number,
      default: 240
    },
    border: Boolean,
    tiaoguo: Object,
    getvideodialogVisible: Boolean
  },
  watch: {
    width(v, _o) {
      if (v < 300) {
        this.width = 300;
      }
      this.scratchwidthset(v);
      this.scratchheightset(this.height);
      this.oldwidth = _o;
    },
    height(v, _o) {
      if (v < 180) {
        this.height = 180;
      }
      this.scratchwidthset(this.width);
      this.scratchheightset(v);
      this.oldheight = _o;
    },
    left(_v, o) {
      this.oldleft = o;
    },
    top(_v, o) {
      this.oldtop = o;
    },
    right(_v, o) {
      this.oldright = o;
    }
  },
  mounted() {
    let oDrag = document.querySelector(".drag");
    let resizeB = document.querySelector(".resizeB");
    let resizeL = document.querySelector(".resizeL");
    let resizeR = document.querySelector(".resizeR");
    let resizeT = document.querySelector(".resizeT");
    let resizeLT = document.querySelector(".resizeLT");
    let resizeLB = document.querySelector(".resizeLB");
    let resizeRT = document.querySelector(".resizeRT");
    let resizeRB = document.querySelector(".resizeRB");
    this.resize(oDrag, resizeB, false, false, false, true);
    this.resize(oDrag, resizeR, false, false, true, false);
    this.resize(oDrag, resizeT, false, true, false, true);
    this.resize(oDrag, resizeL, true, false, true, false);
    this.resize(oDrag, resizeRB, false, false, true, true);
    this.resize(oDrag, resizeRT, false, true, true, true);
    this.resize(oDrag, resizeLT, true, true, true, true);
    this.resize(oDrag, resizeLB, true, false, true, true);
  },
  methods: {
    minclick() {
      this.max = true;
    },
    maxclick() {
      if (this.max === false) {
        this.top = 0;
        this.left = 0;
        this.right = "auto";
        this.width = document.documentElement.offsetWidth;
        this.height = document.documentElement.clientHeight;

        this.max = true;
      } else {
        this.top = this.oldtop;
        this.left = this.oldleft;
        this.right = this.oldright;
        this.height = this.oldheight;
        this.width = this.oldwidth;
        this.max = false;
      }
    },
    resize(oparent, handle, isleft, istop, lookx, looky) {
      const ifloddingset = this.ifloddingset;
      handle.onmousedown = e => {
        if (this.guding) return;
        ifloddingset(true);
        e = e || event;
        e.preventDefault();
        document.onmousemove = e => {
          const oparent = this.$el;
          const iparenttop = oparent.offsetTop; // 获取上面距离
          const iparentleft = oparent.offsetLeft; // 获取做面距离

          e = e || event;

          if (isleft) {
            if (this.width > 300) {
              this.left = e.clientX;
            }
          }
          if (istop) {
            if (this.height != 180) {
              this.top = e.clientY;
            }
          }
          if (lookx) {
            if (isleft) {
              this.width = this.width - (e.clientX - iparentleft);
            } else {
              this.left = iparentleft;
              this.width = e.clientX - iparentleft;
            }
          }
          if (looky) {
            if (istop) {
              this.height = this.height - (e.clientY - iparenttop);
            } else {
              this.height = e.clientY - iparenttop;
            }
          }
          return false;
        };
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
          ifloddingset(false);
        };
      };
    },
    mousedown(e) {
      if (this.guding) return;
      const ifloddingset = this.ifloddingset;
      ifloddingset(true);
      e = e || event;
      e.preventDefault();
      const disX = e.clientX - this.$el.offsetLeft;
      const disY = e.clientY - this.$el.offsetTop;
      document.onmousemove = e => {
        e = e || event;
        let Left = e.clientX - disX;
        let Top = e.clientY - disY;
        let maxleft =
          document.documentElement.offsetWidth - this.$el.offsetWidth;
        let maxtop =
          document.documentElement.clientHeight - this.$el.offsetHeight;
        if (Left < 0) {
          Left = 0;
        } else if (Left > maxleft) {
          Left = maxleft;
        }
        if (Top < 0) {
          Top = 0;
        } else if (Top > maxtop) {
          Top = maxtop;
        }
        this.left = Left;
        this.top = Top;
      };
      document.onmouseup = function() {
        ifloddingset(false);
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  }
};
</script>

<style scoped>
.drag {
  border: 1px solid #62a3ff;
  position: absolute;
  font-size: 14px;
  box-shadow: 2px 2px 5px gray;
  z-index: 2001;
  background-color: #ffffff;
  /* overflow: hidden; */
}
.minbuton {
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  width: 25px;
}

.title {
  height: 30px;
  width: 100%;
  background: #62a3ff;
  display: flex;
  line-height: 30px;
}

.resizeB {
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: 0;
  cursor: n-resize;
  z-index: 2002;
}

.resizeL {
  width: 10px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: w-resize;
  z-index: 2002;
}

.resizeT {
  width: 100%;
  height: 10px;
  position: absolute;
  top: 0;
  cursor: n-resize;
  z-index: 2002;
}

.resizeR {
  width: 10px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: w-resize;
  z-index: 2002;
}

.resizeLT {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2002;
  cursor: nw-resize;
}

.resizeLB {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2002;
  cursor: ne-resize;
}

.resizeRT {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2002;
  cursor: ne-resize;
}

.resizeRB {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2002;
  cursor: nw-resize;
}
.wenti {
  height: 50px;
  background-color: #ffffff;
  padding-right: 20px; 
}
.padd {
  margin-right: 20px;
  margin-top: 10px;
}
</style>

